<template>
  <div class="body">
    <div class="select-region">
      <el-select
        v-model="flag"
        class="flagSelect"
        @change="onFlagChange"
      >
        <el-option
          v-for="item in flagOptions"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
      <el-select
        v-model="type"
        class="typeSelect"
        @change="onTypeChange"
      >
        <el-option
          v-for="item in typeOptions"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
    </div>
    <div
      ref="chart"
      class="chart"
    />
  </div>
</template>

<script>
import * as echarts from 'echarts'
import { getPriceTrend } from '@/api/bigdata/productPrice'
import { flagList, priceTypeList } from '@/config/dict/bigdata'
export default {
  data() {
    return {
      dataList: [],
      timeList: [],
      colorList: ['#00BFFF', '#00FF00', '#FFA500'],
      minValue: 9999,
      maxValue: 0,
      flagOptions: flagList,
      typeOptions: priceTypeList,
      flag: 2,
      type: 1
    }
  },
  mounted() {
    this.load()
  },
  methods: {
    onFlagChange(val) {
      this.flag = val
      this.load()
    },
    onTypeChange(val) {
      this.type = val
      this.drawLineChart()
    },
    load() {
      getPriceTrend({
        startTime: '2024-03-01',
        endTime: '2025-05-01',
        flag: this.flag
      }).then(res => {
        res.data.sort((a, b) => {
          return new Date(a.time) - new Date(b.time)
        })
        this.dataList = res.data
        this.timeList = res.data.map(item => item.time.substring(5))
        this.drawLineChart()
      })
    },
    drawLineChart() {
      const chartDom = this.$refs.chart
      const myChart = echarts.init(chartDom)
      const option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross'
          }
        },
        legend: {
          data: ['最高价格', '平均价格', '最低价格'],
          textStyle: {
            color: 'black', // 设置图例字体颜色为白色
            fontSize: '18px'
          }
        },
        grid: {
          containLabel: true,
          bottom: 100
        },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        xAxis: {
          type: 'category',
          axisLabel: {
            color: '#666',
            fontSize: 16,
            interval: 'auto',
            showMaxLabel: true
          },
          boundaryGap: false,
          data: this.timeList
        },
        yAxis: {
          type: 'value',
          name: '元/斤',
          nameTextStyle: {
            fontSize: 16
          },
          axisLabel: {
            color: '#666',
            fontSize: 16,
            interval: 0
          }
        },
        series: []
      }
      if (this.type == 1) {
        option.series[0] = {
          name: '平均价格',
          type: 'line',
          data: this.dataList.map(item => {
            this.minValue = Math.min(item.avgPrice, this.minValue)
            this.maxValue = Math.max(item.avgPrice, this.maxValue)
            return item.avgPrice.toFixed(2)
          }),
          itemStyle: {
            color: this.colorList[1]
          }
        }
      } else if (this.type == 2) {
        option.series[0] = {
          name: '最高价格',
          type: 'line',
          data: this.dataList.map(item => {
            this.minValue = Math.min(item.maxPrice, this.minValue)
            this.maxValue = Math.max(item.maxPrice, this.maxValue)
            return item.maxPrice.toFixed(2)
          }),
          itemStyle: {
            color: this.colorList[2]
          }
        }
      } else if (this.type == 3) {
        option.series[0] = {
          name: '最低价格',
          type: 'line',
          data: this.dataList.map(item => {
            this.minValue = Math.min(item.minPrice, this.minValue)
            this.maxValue = Math.max(item.minPrice, this.maxValue)
            return item.minPrice.toFixed(2)
          }),
          itemStyle: {
            color: this.colorList[3]
          }
        }
      }
      option.yAxis.min = (this.minValue - 1).toFixed(2)
      option.yAxis.max = (this.maxValue + 1).toFixed(2)
      myChart.clear()
      myChart.setOption(option,false)
      window.addEventListener('resize', function() {
        myChart.resize()
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.body {
  width: 100%;
  height: 100%;
}
.chart {
  width: 100%;
  margin-top:5%;
  height: 95%;
}

.select-region {
  margin: 10px 20px;

  .flagSelect {
    margin: 0 20px;
  }
}
</style>
